<template>
    <div class="content">
        <div class="from">
            <span class="fr ml3">注意：请务必填写正确，否则将无法创建直播间哦</span>
            <div class="clearFix"></div>
            <el-form label-position="right" ref="form" :rules="rules" :model="form" label-width="100px">
                <el-form-item label="APPID" prop="appid" class="labelWidth">
                    <el-input v-model="form.appid" class="input-width"></el-input>
                </el-form-item>
				<!-- <el-form-item label="直播间封面" prop="appid" class="labelWidth">
				    <el-input v-model="form.coverPhoto" class="input-width"></el-input>
				</el-form-item> -->
				
				<el-form-item label="直播间封面" prop="field101" class="labelWidth" >
					<el-upload ref="field101" :file-list="field101fileList" :action="field101Action"
						:on-success="handlePreview"
						:before-upload="field101BeforeUpload"
						:headers="headers"
						>
						<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
					</el-upload>
				</el-form-item>
				
				<el-image
				  style="height: 180px;"
				  :src="form.coverPhoto"
				  :preview-src-list="[form.coverPhoto]"
				  >
				        <div slot="error" class="image-slot">
				          <p>暂未上传</p>
				        </div>
				</el-image>
				
				<el-form-item label="直播间标题" prop="appid" class="labelWidth">
				    <el-input v-model="form.title" class="input-width"></el-input>
				</el-form-item>
				<el-form-item label="直播间简介" prop="appid" class="labelWidth">
				    <el-input v-model="form.roomSum" class="input-width"></el-input>
				</el-form-item>
				<el-form-item label="直播类别" prop="appid" class="labelWidth" >
				    <el-select v-model="form.category"
					placeholder="请选择执行状态"
					clearable
					size="small"
					style="width: 100%;"
					>
				      <el-option
				        v-for="dict in stateOptions"
				    	      :key="dict.dictValue"
				    	      :label="dict.dictLabel"
				    	      :value="dict.dictValue"
				      >{{dict.dictLabel}}</el-option>
				    </el-select>
				</el-form-item>
            </el-form>
        </div>
        <br/>
        <div class="btn-group">
            <el-button type="success" @click="goNext(form)">完成</el-button>
            <el-button @click="back">返回</el-button>
        </div>
    </div>

</template>

<script>
	import * as requireUrls from '../../../utils/allUrls'
	import { getToken } from "@/utils/auth";
	import {getDicts} from "../../../api/dict.js";
	import {
		addLivebroadcastingroom
	} from "../../../api/liveHall.js";
	import {
		createGroup
	} from "../../../api/tim.js";
	export default {
		name: "page3",
		data() {
			return {
				stateOptions:'',
				form: {
					appid: '',
					title:'',
					category:'',
					coverPhoto:'',
					roomSum:'',
					userId:'',
					memo:''
				},
				rules: {
					appid: [{required: true, message: "请填写APPID", trigger: 'blur'}]
				},
				field101Action:process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
				field101fileList: [],
				field101fileListImg: [],
				headers: {
				  Authorization: "Bearer " + getToken(),
				},
			}
		},
		methods: {
			//上传
			handlePreview1(file){
			  this.form.coverPhoto  = file.data.url
			},
			handlePreview(file) {
					  this.form.coverPhoto  = file.data.url
			        console.log(file);
			},
			    field101BeforeUpload(file) {
			      let isRightSize = file.size / 1024 / 1024 < 1000
			      if (!isRightSize) {
			        this.$message.error('文件大小超过 200MB')
			      }
			      return isRightSize
			    },
			goNext(form) {
				debugger
				this.form.memo  = new Date().getTime();
				this.form.userId = this.$store.state.user.userid
				addLivebroadcastingroom(form).then(response => {
				  this.$alert("<font color='red'>恭喜你，您的直播间开通成功！</font>", '系统提示', {
				    dangerouslyUseHTMLString: true
				  }).then(() => {
				    this.$router.push("/personalCenter");
					createGroup(this.form.title,this.$store.state.user.userid,this.form.memo)
				  }).catch(() => {});
				  this.open = false;
				  this.getList();
				});
			},
			back() {
				this.$emit('getStepActive', 1);
				this.$router.go(-1)
			},
		},
		mounted() {
			getDicts("LiveTypq").then(response => {
				debugger
				this.stateOptions = response.data;
			});
			
			this.$emit('getStepActive', 2);
		}
	}
</script>

<style scoped lang="scss">
    .content {
        padding-top: 5vh;
        padding-bottom: 5vh;
        width: 100%;
        text-align: center;

        .form {
            text-align: center;

        }

        .labelWidth {
            width: 80%;
            margin: 0 auto;
        }
    }

    .fl {
        float: left;
    }

    .fr {
        color: orangered;
    }

    .clearFix {
        clear: both;
    }
	

</style>
<style>
	.el-select .el-input {
	    width: auto!important; 
	}
</style>
